<template>
  <div class="mod-config">
    <el-form
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="getDataPost()"
      class="formSearch"
    >
      <el-form-item label="日期:">
        <el-date-picker
          size="mini"
          v-model="dataForm.time"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button size="mini" @click="getDataPost()" type="primary"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 每日汇总 -->
    <el-tabs tab-position="left" @tab-click="tabGet" class="tabPart">
      <el-tab-pane label="每日汇总">
        <dayreport v-if="dayreportVisible" ref="dayReport" />
      </el-tab-pane>
      <el-tab-pane label="各流量计售水情况">
        <daysold v-if="daysoldVisible" ref="daySold" />
      </el-tab-pane>
      <el-tab-pane label="各片区水量占百分比">
        <percent v-if="percentVisible" ref="percentPart" />
      </el-tab-pane>
      <el-tab-pane label="各片区售水量汇总-每日水量汇总">
        <daywater v-if="daywaterVisible" ref="dayWater" />
      </el-tab-pane>
      <el-tab-pane label="各片区售水量汇总-每月累计水量汇总">
        <monthwater v-if="monthwaterVisible" ref="monthWater" />
      </el-tab-pane>
      <el-tab-pane label="各片区产销差率">
        <salesplus v-if="salesplusVisible" ref="salesPlus" />
      </el-tab-pane>
      <el-tab-pane label="各流量计凌晨时段水量">
        <twofourwater v-if="twofourwaterVisible" ref="twofourWater" />
      </el-tab-pane>
    </el-tabs>
    <!-- 每日售水情况 -->
    <undo-data
      v-if="undoVisible"
      ref="undoDataList"
      @refreshDataList="getDataPost"
    />
    <undo-data-two
      v-if="undotwoVisible"
      ref="undotwoDataList"
      @refreshDataList="getDataPost"
    />
  </div>
</template>

<script>
import moment from "moment";
import { isAuth } from "../../../utils";
import dayreport from "./report-dayreport";
import daysold from "./report-daysold";
import daywater from "./report-daywater";
import monthwater from "./report-monthwater";
import salesplus from "./report-salesplus";
import percent from "./report-percent";
import twofourwater from "./report-2-4water";
import undoData from "./report-undodata";
import undoDataTwo from "./report-undodataTwo";
export default {
  data() {
    return {
      dayreportVisible: false, // 每日汇总
      daysoldVisible: false, // 各流量计售水情况
      percentVisible: false, // 各片区水量占百分比
      daywaterVisible: false, // 各片区售水量汇总-每日水量汇总
      monthwaterVisible: false, // 各片区售水量汇总-每月累计水量汇总
      salesplusVisible: false, // 各片区产销差率
      twofourwaterVisible: false, // 各流量计凌晨时段水量
      undoVisible: false, // 存在日期为填写弹窗
      undotwoVisible: false, // 广州、紫南数据弹窗填写
      dataForm: {
        time: [
          moment(new Date()).format("YYYY-MM-DD"),
          moment(new Date()).format("YYYY-MM-DD")
        ]
      },
      nowTabsNum: 0, // 当前选中的tab index
      dayTimeOptions: [],
      stationOptions: []
    };
  },
  components: {
    dayreport,
    daysold,
    daywater,
    monthwater,
    salesplus,
    percent,
    twofourwater,
    undoData,
    undoDataTwo
  },
  created() {
    this.getStationOption(); // 获取流量计数据
  },
  activated() {
    this.getDataPost();
  },
  methods: {
    // tab切换判断
    tabGet(data) {
      this.nowTabsNum = data.index; // 赋值切换的index值
      this.getCheckdata(this.nowTabsNum);
    },
    // 默认进入显示页面
    getDataPost() {
      this.getCheckdata(this.nowTabsNum);
      // 需要延后执行，因为直接请求会导致无法获取泵站地点数据
      this.$nextTick(() => {
        this.getCheckNoneData();
      });
    },
    // 检查当前日期中，是否有手抄数据没有填写
    getCheckNoneData() {
      this.$http({
        url: this.$http.adornUrl("/cms/dailySummary/undoCopyData"),
        method: "get",
        params: this.$http.adornParams({
          startDate: this.dataForm.time[0],
          endDate: this.dataForm.time[1]
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          if (
            data.undoCopyData.copyList.length > 0 &&
            isAuth("cms:tbCopyFlowData:save")
          ) {
            let dataTime = [];
            data.undoCopyData.copyList.forEach(item => {
              dataTime.push(item.date);
            });
            // this.$notify({
            //   title: '缺漏提示',
            //   message: '目前以下时间缺乏数据，请及时补充' + dataTime.toString(),
            //   duration: 0
            // });

            // this.undoVisible = true;
            // this.$nextTick(() => {
            //   this.$refs.undoDataList.init(
            //     data.undoCopyData.copyList,
            //     this.stationOptions
            //   );
            // });
          }
          if (
            data.undoCopyData.cumulativeList.length > 0 &&
            isAuth("cms:tbCumulativeFlow:save")
          ) {
            let dataTime = [];
            data.undoCopyData.cumulativeList.forEach(item => {
              dataTime.push(item.date);
            });
            // this.$notify({
            //   title: '缺漏提示',
            //   message: '目前以下时间缺乏手抄数据，请及时补充' + dataTime.toString(),
            //   duration: 0
            // });
            // this.undotwoVisible = true;
            // this.$nextTick(() => {
            //   this.$refs.undotwoDataList.init(
            //     data.undoCopyData.cumulativeList,
            //     this.stationOptions
            //   );
            // });
          }
        }
      });
    },
    // 获取泵站信息
    getStationOption() {
      this.$http({
        url: this.$http.adornUrl(`/cms/tbEquipment/combo`),
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.stationOptions = data.list;
        } else {
          this.stationOptions = [];
        }
      });
    },
    // 判断数据
    getCheckdata(data) {
      if (data === "0" || data === 0) {
        // 每日汇总
        this.dayreportVisible = true;
        this.daysoldVisible = false;
        this.percentVisible = false;
        this.daywaterVisible = false;
        this.monthwaterVisible = false;
        this.salesplusVisible = false;
        this.twofourwaterVisible = false;
        this.$nextTick(() => {
          this.$refs.dayReport.init(this.dataForm.time);
        });
      } else if (data === "1" || data === 1) {
        // 各流量计售水情况
        this.dayreportVisible = false;
        this.daysoldVisible = true;
        this.percentVisible = false;
        this.daywaterVisible = false;
        this.monthwaterVisible = false;
        this.salesplusVisible = false;
        this.twofourwaterVisible = false;
        this.$nextTick(() => {
          this.$refs.daySold.init(this.dataForm.time);
        });
      } else if (data === "2" || data === 2) {
        // 各片区水量占百分比
        this.dayreportVisible = false;
        this.daysoldVisible = false;
        this.percentVisible = true;
        this.daywaterVisible = false;
        this.monthwaterVisible = false;
        this.salesplusVisible = false;
        this.twofourwaterVisible = false;
        this.$nextTick(() => {
          this.$refs.percentPart.init(this.dataForm.time);
        });
      } else if (data === "3" || data === 3) {
        // 各片区售水量汇总-每日水量汇总
        this.dayreportVisible = false;
        this.daysoldVisible = false;
        this.percentVisible = false;
        this.daywaterVisible = true;
        this.monthwaterVisible = false;
        this.salesplusVisible = false;
        this.twofourwaterVisible = false;
        this.$nextTick(() => {
          this.$refs.dayWater.init(this.dataForm.time);
        });
      } else if (data === "4" || data === 4) {
        // 各片区售水量汇总-每月累计水量汇总
        this.dayreportVisible = false;
        this.daysoldVisible = false;
        this.percentVisible = false;
        this.daywaterVisible = false;
        this.monthwaterVisible = true;
        this.salesplusVisible = false;
        this.twofourwaterVisible = false;
        this.$nextTick(() => {
          this.$refs.monthWater.init(this.dataForm.time);
        });
      } else if (data === "5" || data === 5) {
        // 各片区产销差率
        this.dayreportVisible = false;
        this.daysoldVisible = false;
        this.percentVisible = false;
        this.daywaterVisible = false;
        this.monthwaterVisible = false;
        this.salesplusVisible = true;
        this.twofourwaterVisible = false;
        this.$nextTick(() => {
          this.$refs.salesPlus.init(this.dataForm.time);
        });
      } else if (data === "6" || data === 6) {
        // 各流量计凌晨时段水量
        this.dayreportVisible = false;
        this.daysoldVisible = false;
        this.percentVisible = false;
        this.daywaterVisible = false;
        this.monthwaterVisible = false;
        this.salesplusVisible = false;
        this.twofourwaterVisible = true;
        this.$nextTick(() => {
          this.$refs.twofourWater.init(this.dataForm.time);
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
::-webkit-scrollbar {
  height: 8px;
  position: absolute;
  left: 0;
  bottom: -6px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
}
</style>
